<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="客户信息" prop="guestId">
        <el-select v-model="queryParams.guestId" style="width: 100%;" filterable placeholder="选择客户信息">
          <el-option v-for="item in this.aGuestList" :key="item.guestId" :label="item.guestName" :value="item.guestId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="经营单位名称" prop="operateCompany">
        <el-input v-model="queryParams.operateCompany" placeholder="请输入单位名称" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="业务性质" prop="businessNature">
        <el-select v-model="queryParams.businessNature" placeholder="请选择业务性质：两非、木制、商检、其他非报" clearable>
          <el-option v-for="dict in dict.type.business_nature" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="运输方式" prop="transportNature">
        <el-select v-model="queryParams.transportNature" placeholder="请选择运输方式：海运、陆运、空运、铁路" clearable>
          <el-option v-for="dict in dict.type.transport_nature" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="贸易方向" prop="tradeNature">
        <el-select v-model="queryParams.tradeNature" placeholder="请选择贸易方向：进口、出口" clearable>
          <el-option v-for="dict in dict.type.trade_nature" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="船名" prop="shipName">
        <el-input v-model="queryParams.shipName" placeholder="请输入船名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="航次" prop="flight">
        <el-input v-model="queryParams.flight" placeholder="请输入航次" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="提单号" prop="billLadingNum">
        <el-input v-model="queryParams.billLadingNum" placeholder="请输入提单号" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="进口日期" prop="comeDate">
        <el-date-picker clearable v-model="queryParams.comeDate" type="date" value-format="yyyy-MM-dd"
          placeholder="请选择进口日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="申报日期" prop="reportDate">
        <el-date-picker clearable v-model="queryParams.reportDate" type="date" value-format="yyyy-MM-dd"
          placeholder="请选择申报日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="启运国" prop="countryDeparture">
        <el-input v-model="queryParams.countryDeparture" placeholder="请输入启运国" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="贸易国" prop="tradingNations">
        <el-input v-model="queryParams.tradingNations" placeholder="请输入贸易国" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button style="background-color: #8C60ff;color: #ffffff;" icon="el-icon-search" size="small"
          @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button style="background-color: #ff6fcd;color: #ffffff;" icon="el-icon-camera" size="small"
          @click="AutoCustomsMsg" v-hasPermi="['aCustomsMsg:aCustomsMsg:add']">自动识别</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button style="background-color: #8C60ff;color: #ffffff;" icon="el-icon-plus" size="small" @click="handleAdd"
          v-hasPermi="['aCustomsMsg:aCustomsMsg:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate"
          style="background-color: #44cf84;color: #ffffff;" v-hasPermi="['aCustomsMsg:aCustomsMsg:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button style="background-color: #ff501e;color: #ffffff;" icon="el-icon-delete" size="small"
          :disabled="multiple" @click="handleDelete" v-hasPermi="['aCustomsMsg:aCustomsMsg:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button style="background-color: #ffa724;color: #ffffff;" icon="el-icon-download" size="small"
          @click="handleExport" v-hasPermi="['aCustomsMsg:aCustomsMsg:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="aCustomsMsgList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column label="客户名称" align="center" prop="guestName" width="240" />
      <el-table-column label="报关单号" align="center" prop="customsNum" width="180" />
      <el-table-column label="经营单位名称" align="center" prop="operateCompany" width="240" />
      <el-table-column label="业务性质" align="center" prop="businessNature">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.business_nature" :value="scope.row.businessNature" />
        </template>
      </el-table-column>
      <el-table-column label="运输方式" align="center" prop="transportNature">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.transport_nature" :value="scope.row.transportNature" />
        </template>
      </el-table-column>
      <el-table-column label="贸易方向" align="center" prop="tradeNature">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.trade_nature" :value="scope.row.tradeNature" />
        </template>
      </el-table-column>
      <el-table-column label="船名" align="center" prop="shipName" width="150" />
      <el-table-column label="航次" align="center" prop="flight" />
      <el-table-column label="提单号" align="center" prop="billLadingNum" width="150" />
      <el-table-column label="保税核注清单号" align="center" prop="inventoryNum" width="180" />
      <el-table-column label="件数" align="center" prop="pieces" />
      <el-table-column label="毛重" align="center" prop="grossWeight" />
      <el-table-column label="净重" align="center" prop="netWeight" />
      <el-table-column label="进口日期" align="center" prop="comeDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.comeDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申报日期" align="center" prop="reportDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.reportDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="监管方式" align="center" prop="regulatory" />
      <el-table-column label="启运国" align="center" prop="countryDeparture" width="120" />
      <el-table-column label="贸易国" align="center" prop="tradingNations" width="120" />
      <el-table-column label="合同协议号" align="center" prop="contractAgreement" width="220" />
      <el-table-column label="初始填单人" align="center" prop="completeBy" width="180" />
      <el-table-column label="修改记录" align="center" prop="updateId" />

      <!--      <el-table-column label="附件下载" align="center" prop="filePath" width="120px" show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div v-if="scope.row.filePath">
            <el-button style="background-color: #8C60ff;color: #ffffff;"  icon="el-icon-download" size="small"
              @click="openFjInNewTab(baseUrl+scope.row.filePath)">下载附件</el-button>
          </div>
          <div v-else>
            <el-button type="info"  icon="el-icon-download" size="small">暂无附件</el-button>
          </div>

        </template>
      </el-table-column> -->

      <el-table-column label="操作" align="center" width="330px" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="8">
              <el-button icon="el-icon-s-claim" size="small" style="background-color: #56C0FF;color: #ffffff;"
                @click="goToCostPage(scope.row.customsId)">费用详情</el-button>
            </el-col>
            <el-col :span="8">
              <el-button icon="el-icon-shopping-cart-2" size="small" style="background-color: #FF6699;color: #ffffff;"
                @click="goToGoodsPage(scope.row.customsId)">商品详情</el-button>
            </el-col>
            <el-col :span="8">
              <el-button icon="el-icon-edit" size="small" @click="handleUpdate(scope.row)"
                style="background-color: #44cf84;color: #ffffff;"
                v-hasPermi="['aCustomsMsg:aCustomsMsg:edit']">信息修改</el-button>
            </el-col>
          </el-row>
          <div style="height: 5px;"> </div>
          <el-row>
            <el-col :span="8">
              <el-button icon="el-icon-edit" size="small" @click="goToInventoryPage(scope.row.customsId)"
                style="background-color: #5C7AFF;color: #ffffff;"
                v-hasPermi="['aCustomsMsg:aCustomsMsg:edit']">库存管理</el-button>
            </el-col>
            <el-col :span="8">
              <div v-if="scope.row.filePath">
                <el-button icon="el-icon-download" size="small" style="background-color:#faa200;color: #ffffff;"
                  @click="openFjInNewTab(baseUrl+scope.row.filePath)">下载附件</el-button>
              </div>
              <div v-else>
                <el-button type="info" icon="el-icon-download" size="small">暂无附件</el-button>
              </div>
            </el-col>
            <el-col :span="8">
              <el-button icon="el-icon-delete" size="small" @click="handleDelete(scope.row)"
                style="background-color: #ff501e;color: #ffffff;"
                v-hasPermi="['aCustomsMsg:aCustomsMsg:remove']">信息删除</el-button>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改报关单信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :close-on-click-modal=false>
      <el-form ref="form" :model="form" :rules="rules" label-width="115px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="业务性质" prop="businessNature">
              <el-select v-model="form.businessNature" placeholder="选择业务性质">
                <el-option v-for="dict in dict.type.business_nature" :key="dict.value" :label="dict.label"
                  :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运输方式" prop="transportNature">
              <el-select v-model="form.transportNature" placeholder="选择运输方式">
                <el-option v-for="dict in dict.type.transport_nature" :key="dict.value" :label="dict.label"
                  :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="贸易方向" prop="tradeNature">
              <el-select v-model="form.tradeNature" placeholder="选择贸易方向">
                <el-option v-for="dict in dict.type.trade_nature" :key="dict.value" :label="dict.label"
                  :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户信息" prop="guestId">
              <el-select v-model="form.guestId" style="width: 100%;" filterable placeholder="请选择">
                <el-option v-for="item in this.aGuestList" :key="item.guestId" :label="item.guestName"
                  :value="item.guestId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报关单号" prop="customsNum">
              <el-input v-model="form.customsNum" placeholder="请输入提单号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="经营单位名称" prop="operateCompany">
          <el-input v-model="form.operateCompany" placeholder="请输入经营单位名称" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="启运国" prop="countryDeparture">
              <el-input v-model="form.countryDeparture" placeholder="请输入启运国" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="贸易国" prop="tradingNations">
              <el-input v-model="form.tradingNations" placeholder="请输入贸易国" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="船名" prop="shipName">
              <el-input v-model="form.shipName" placeholder="请输入船名" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="航次" prop="flight">
              <el-input v-model="form.flight" placeholder="请输入航次" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="提单号" prop="billLadingNum">
              <el-input v-model="form.billLadingNum" placeholder="请输入提单号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保税核注清单号" prop="inventoryNum">
              <el-input v-model="form.inventoryNum" placeholder="请输入保税核注清单号" />
            </el-form-item>
          </el-col>
        </el-row><el-row>
          <el-col :span="8">
            <el-form-item label="件数" prop="pieces">
              <el-input v-model="form.pieces" placeholder="请输入件数" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="毛重" prop="grossWeight">
              <el-input v-model="form.grossWeight" placeholder="请输入毛重" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="净重" prop="netWeight">
              <el-input v-model="form.netWeight" placeholder="请输入净重" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="进口日期" prop="comeDate">
              <el-date-picker clearable v-model="form.comeDate" type="date" value-format="yyyy-MM-dd"
                style="width: 100%;" placeholder="请选择进口日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申报日期" prop="reportDate">
              <el-date-picker clearable v-model="form.reportDate" type="date" value-format="yyyy-MM-dd"
                style="width: 100%;" placeholder="请选择申报日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="监管方式" prop="regulatory">
              <el-input v-model="form.regulatory" placeholder="请输入监管方式" />
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="合同协议号" prop="contractAgreement">
              <el-input v-model="form.contractAgreement" placeholder="请输入合同协议号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="附件" prop="filePath">
          <file-upload v-model="form.filePath" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="background-color: #8C60ff;color: #ffffff;" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="上传报关单" :visible.sync="openSCBGD" width="550px">
      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
        <el-form-item label="上传报关单" prop="url">
          <file-upload-customs v-model="formBgd.url" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="background-color: #8C60ff;color: #ffffff;" @click="submitFormAuto">确 定</el-button>
        <el-button @click="cancelAuto">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 费用详情弹窗 -->
    <el-dialog title="费用信息" :visible.sync="openFy" width="800px" append-to-body>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button style="background-color: #8C60ff;color: #ffffff;" icon="el-icon-plus" size="small"
            @click="handleAddFy" v-hasPermi="['aCost:aCost:add']">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button style="background-color: #44cf84;color: #ffffff;" icon="el-icon-edit" size="small"
            :disabled="single" @click="handleUpdateFy" v-hasPermi="['aCost:aCost:edit']">修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button style="background-color: #ff501e;color: #ffffff;" icon="el-icon-delete" size="small"
            :disabled="multiple" @click="handleDeleteFy" v-hasPermi="['aCost:aCost:remove']">删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button style="background-color: #ffa724;color: #ffffff;" icon="el-icon-download" size="small"
            @click="handleExportFy" v-hasPermi="['aCost:aCost:export']">导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
      <el-table v-loading="loading" :data="aCostList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column label="费用类目" align="center" prop="costName" />
        <el-table-column label="价格" align="center" prop="costNum" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button style="background-color: #44cf84;color: #ffffff;width: 70px;" icon="el-icon-edit" size="small"
              @click="handleUpdateFy(scope.row)" v-hasPermi="['aCost:aCost:edit']">修改</el-button>
            <el-button style="background-color: #ff501e;color: #ffffff;width: 70px;" icon="el-icon-delete" size="small"
              @click="handleDeleteFy(scope.row)" v-hasPermi="['aCost:aCost:remove']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加或修改费用对话框 -->
      <el-dialog :title="titleFyXx" :visible.sync="openFyXx" width="400px" append-to-body :close-on-click-modal=false>
        <el-form ref="form" :model="formCost" :rules="rules" label-width="80px">
          <el-form-item label="费用类目" prop="costNameId">
            <el-select v-model="formCost.costNameId" filterable placeholder="请选择">
              <el-option v-for="item in this.costNameList" :key="item.costNameId" :label="item.costName"
                :value="item.costNameId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="价格" prop="costNum">
            <el-input v-model="formCost.costNum" style="width: 220px;" placeholder="请输入价格" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button style="background-color: #8C60ff;color: #ffffff;" @click="submitFormFy">确 定</el-button>
          <el-button @click="cancelFy">取 消</el-button>
        </div>
      </el-dialog>
    </el-dialog>
    <!-- 商品信息弹窗-->
    <el-dialog title="商品信息" :visible.sync="openSp" width="900px" append-to-body>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button style="background-color: #8C60ff;color: #ffffff;" icon="el-icon-plus" size="small"
            @click="handleAddSp" v-hasPermi="['aGoods:aGoods:add']">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button style="background-color: #44cf84;color: #ffffff;" icon="el-icon-edit" size="small"
            :disabled="single" @click="handleUpdateSp" v-hasPermi="['aGoods:aGoods:edit']">修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button style="background-color: #ff501e;color: #ffffff;" icon="el-icon-delete" size="small"
            :disabled="multiple" @click="handleDeleteSp" v-hasPermi="['aGoods:aGoods:remove']">删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button style="background-color: #ffa724;color: #ffffff;" icon="el-icon-download" size="small"
            @click="handleExportSp" v-hasPermi="['aGoods:aGoods:export']">导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="aGoodsList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <!-- <el-table-column label="商品id" align="center" prop="goodsId" /> -->
        <el-table-column label="商品名称" align="center" prop="goodsName" />
        <el-table-column label="商品数量" align="center" prop="goodsNum" />
        <el-table-column label="单位" align="center" prop="unit" />
        <el-table-column label="单价" align="center" prop="price" />
        <el-table-column label="总价" align="center" prop="allPrice" />
        <el-table-column label="币种" align="center" prop="currency">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.currency" :value="scope.row.currency" />
          </template>
        </el-table-column>
        <el-table-column label="原产国" align="center" prop="original" />
        <!-- <el-table-column label="报关单id" align="center" prop="customsId" /> -->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200px">
          <template slot-scope="scope">
            <el-button size="small" style="background-color: #44cf84;color: #ffffff;width: 70px;" icon="el-icon-edit"
              @click="handleUpdateSp(scope.row)" v-hasPermi="['aGoods:aGoods:edit']">修改</el-button>
            <!--            <el-button size="small" type="text" icon="el-icon-delete" @click="handleDeleteSp(scope.row)"
              v-hasPermi="['aGoods:aGoods:remove']">删除</el-button> -->
            <el-button icon="el-icon-delete" size="small" @click="handleDeleteSp(scope.row)"
              style="background-color: #ff501e;color: #ffffff; width: 70px;"
              v-hasPermi="['aGoods:aGoods:remove']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加或修改商品对话框 -->
      <el-dialog :title="titleSpXx" :visible.sync="openSpXx" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="商品名称" prop="goodsName">
            <el-input v-model="formSp.goodsName" placeholder="请输入商品名称" />
          </el-form-item>
          <el-form-item label="商品数量" prop="goodsNum">
            <el-input v-model="formSp.goodsNum" placeholder="请输入商品数量" />
          </el-form-item>
          <el-form-item label="单位" prop="unit">
            <el-input v-model="formSp.unit" placeholder="请输入单位" />
          </el-form-item>
          <el-form-item label="总价" prop="allPrice">
            <el-input v-model="formSp.allPrice" placeholder="请输入总价" />
          </el-form-item>
          <el-form-item label="币种" prop="currency">
            <el-select v-model="formSp.currency" placeholder="请选择币种">
              <el-option v-for="dict in dict.type.currency" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="原产国" prop="original">
            <el-input v-model="formSp.original" placeholder="请输入原产国" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button style="background-color: #8C60ff;color: #ffffff;" @click="submitFormSp">确 定</el-button>
          <el-button @click="cancelSp">取 消</el-button>
        </div>
      </el-dialog>
    </el-dialog>

    <el-dialog title="库存管理" :visible.sync="openKc" width="950px" append-to-body>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button style="background-color: #8C60ff;color: #ffffff;" icon="el-icon-plus" size="small"
            @click="handleAddKc" v-hasPermi="['aInventory:aInventory:add']">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button style="background-color: #ff501e;color: #ffffff;" icon="el-icon-delete" size="small"
            :disabled="multiple" @click="handleDeleteKc" v-hasPermi="['aInventory:aInventory:remove']">删除</el-button>
        </el-col>
        <el-col :span="1.5">
        </el-col>
      </el-row>

      <el-table v-loading="loading" :data="aInventoryList" @selection-change="handleSelectionChangeKC">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="船名" align="center" prop="shipName" width="180" />
        <el-table-column label="航次" align="center" prop="flight" />
        <el-table-column label="件数" align="center" prop="pieces" />
        <el-table-column label="毛重" align="center" prop="grossWeight" width="100" />
        <el-table-column label="净重" align="center" prop="netWeight" width="100" />
        <el-table-column label="余量" align="center" prop="surplus" width="100" />
        <el-table-column label="保税核注清单号" align="center" prop="inventoryNum" width="180" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200" fixed="right">
          <template slot-scope="scope">
            <el-row>
              <el-col :span="12">
                <el-button style="background-color: #ffa724;color: #ffffff; width: 70px;" icon="el-icon-download" size="small"
                  @click="handleExportCk(scope.row)" v-hasPermi="['aInventory:aInventory:export']">导出</el-button></el-col>
              <el-col :span="12">
                <el-button icon="el-icon-delete" size="small" @click="handleDeleteKc(scope.row)"
                  style="background-color: #ff501e;color: #ffffff; width: 70px;"
                  v-hasPermi="['aInventory:aInventory:remove']">删除</el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加或修改库存管理对话框 -->
      <el-dialog title="添加库存信息" :visible.sync="openKcXx" width="500px" append-to-body>
        <el-form ref="form" :model="formKc" :rules="rules" label-width="80px">
          <!--          <el-form-item label="船名" prop="shipName">
            <el-input v-model="formKc.shipName" placeholder="请输入船名" />
          </el-form-item>
          <el-form-item label="航次" prop="flight">
            <el-input v-model="formKc.flight" placeholder="请输入航次" />
          </el-form-item> -->
          <el-form-item label="件数" prop="pieces">
            <el-input v-model="formKc.pieces" placeholder="请输入件数" />
          </el-form-item>
          <!--          <el-form-item label="毛重" prop="grossWeight">
            <el-input v-model="formKc.grossWeight" placeholder="请输入毛重" />
          </el-form-item>
          <el-form-item label="净重" prop="netWeight">
            <el-input v-model="formKc.netWeight" placeholder="请输入净重" />
          </el-form-item> -->
          <!--          <el-form-item label="余量" prop="surplus">
            <el-input v-model="formKc.surplus" placeholder="请输入余量" />
          </el-form-item> -->
          <!--          <el-form-item label="保税核注清单号" prop="inventoryNum">
            <el-input v-model="formKc.inventoryNum" placeholder="请输入保税核注清单号" />
          </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button style="background-color: #8C60ff;color: #ffffff;" @click="submitFormKc">确 定</el-button>
          <el-button @click="cancelKc">取 消</el-button>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
  import {
    exportDocx
  } from "@/utils/docx.js";
  import {
    listACustomsMsg,
    getACustomsMsg,
    delACustomsMsg,
    addACustomsMsg,
    autoAddCustomsMsg,
    updateACustomsMsg
  } from "@/api/aCustomsMsg/aCustomsMsg";
  import {
    listAGuest
  } from "@/api/aGuest/aGuest";
  import {
    CostNamelist
  } from "@/api/aCostName/costName";
  import {
    listACostNoPage,
    getACost,
    delACost,
    addACost,
    updateACost
  } from "@/api/aCost/aCost";
  import {
    Row
  } from "element-ui";
  import {
    listAGoodsNoPage,
    getAGoods,
    delAGoods,
    addAGoods,
    updateAGoods
  } from "@/api/aGoods/aGoods";
  import {
    listAInventoryNoPage,
    getAInventory,
    delAInventory,
    addAInventory,
    updateAInventory
  } from "@/api/aInventory/aInventory";

  export default {
    name: "ACustomsMsg",
    dicts: ['transport_nature', 'trade_nature', 'business_nature', 'currency'],
    data() {
      return {
        baseUrl: process.env.VUE_APP_BASE_API,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 报关单信息表格数据
        aCustomsMsgList: [],
        //客户信息列表
        aGuestList: [],
        // 费用科目表格数据
        costNameList: [],
        aGoodsList: [],
        aInventoryList: [],
        // 弹出层标题
        title: "",
        titleFyXx: "",
        titleSpXx: "",
        // 是否显示弹出层
        open: false,
        openFy: false,
        openFyXx: false,
        openSp: false,
        openSpXx: false,
        openKc: false,
        openKcXx: false,
        openSCBGD: false,
        // 费目查询参数
        custNameQueryParams: {
          costName: null
        },
        custQueryParams: {
          customsId: null
        },
        goodsQueryParams: {
          customsId: null
        },
        inventoryQueryParams: {
          customsId: null
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          guestId: null,
          customsNum: null,
          operateCompany: null,
          businessNature: null,
          transportNature: null,
          tradeNature: null,
          shipName: null,
          flight: null,
          billLadingNum: null,
          inventoryNum: null,
          pieces: null,
          grossWeight: null,
          netWeight: null,
          comeDate: null,
          reportDate: null,
          regulatory: null,
          countryDeparture: null,
          tradingNations: null,
          contractAgreement: null,
          completeBy: null,
          updateId: null,
          filePath: null,
        },
        queryGuest: {},
        // 表单参数
        form: {},
        formCost: {},
        formSp: {},
        formKc: {},
        formBgd: {},
        listACostNoPageType: 0,
        // 表单校验
        rules: {
          operateCompany: [{
            required: true,
            message: "经营单位名称不能为空",
            trigger: "blur"
          }],
          businessNature: [{
            required: true,
            message: "业务性质不能为空",
            trigger: "change"
          }],
          transportNature: [{
            required: true,
            message: "运输方式不能为空",
            trigger: "change"
          }],
          tradeNature: [{
            required: true,
            message: "贸易方向不能为空",
            trigger: "blur"
          }],
          shipName: [{
            required: true,
            message: "船名不能为空",
            trigger: "blur"
          }],
          flight: [{
            required: true,
            message: "航次不能为空",
            trigger: "blur"
          }],
          billLadingNum: [{
            required: true,
            message: "提单号不能为空",
            trigger: "blur"
          }],
          pieces: [{
            required: true,
            message: "件数不能为空",
            trigger: "blur"
          }],
          grossWeight: [{
            required: true,
            message: "毛重不能为空",
            trigger: "blur"
          }],
          netWeight: [{
            required: true,
            message: "净重不能为空",
            trigger: "blur"
          }],
          comeDate: [{
            required: true,
            message: "进口日期不能为空",
            trigger: "blur"
          }],
          reportDate: [{
            required: true,
            message: "申报日期不能为空",
            trigger: "blur"
          }],
          regulatory: [{
            required: true,
            message: "监管方式不能为空",
            trigger: "blur"
          }],
          countryDeparture: [{
            required: true,
            message: "启运国不能为空",
            trigger: "blur"
          }],
          tradingNations: [{
            required: true,
            message: "贸易国不能为空",
            trigger: "blur"
          }],
          contractAgreement: [{
            required: true,
            message: "合同协议号不能为空",
            trigger: "blur"
          }],
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询报关单信息列表 */
      getList() {
        this.loading = true;
        // this.formBgd={};
        listACustomsMsg(this.queryParams).then(response => {
          this.aCustomsMsgList = response.rows;
          this.total = response.total;
        });
        listAGuest(this.queryGuest).then(response => {
          this.aGuestList = response.rows;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      //取消自动识别
      cancelAuto() {
        this.openSCBGD = false;
        this.reset();
        if (this.formBgd.url != undefined) {
          delACustomsMsg([this.formBgd.url]);
          this.getList();
        }
        this.formBgd = {};
      },
      // 费用取消按钮
      cancelFy() {
        this.openFyXx = false;
        this.reset();
      },
      // 费用商品按钮
      cancelSp() {
        this.openSpXx = false;
        this.resetSp();
      },
      // 关闭库存信息按钮
      cancelKc() {
        this.openKcXx = false;
        this.resetKc();
      },
      // 表单重置
      reset() {
        this.form = {
          customsId: null,
          customsNum: null,
          guestId: null,
          operateCompany: null,
          businessNature: null,
          transportNature: null,
          tradeNature: null,
          shipName: null,
          flight: null,
          billLadingNum: null,
          inventoryNum: null,
          pieces: null,
          grossWeight: null,
          netWeight: null,
          comeDate: null,
          reportDate: null,
          regulatory: null,
          countryDeparture: null,
          tradingNations: null,
          contractAgreement: null,
          completeBy: null,
          updateId: null,
          filePath: null,
          createTime: null
        };
        this.resetForm("form");
        this.formBgd = {};
        this.formKc = {};
        this.formSp = {};
        this.formCost = {};
      },
      // 费用表单重置
      resetFy() {
        this.formCost = {};
        this.resetForm("form");
      },
      //商品表单重置
      resetSp() {
        this.formSp = {};
        this.resetForm("form");
      },
      //商品表单重置
      resetKc() {
        this.formKc = {};
        this.resetForm("form");
      },
      // 打开费用页
      goToCostPage(customsId) {
        this.loading = true;
        this.openFy = false;
        this.aCostList = [];
        this.custQueryParams.customsId = customsId;
        listACostNoPage(this.custQueryParams).then(response => {
          this.aCostList = response.rows;
          this.openFy = true;
          this.loading = false;
        });
        CostNamelist().then(response => {
          this.costNameList = response;
        });
      },
      // 打开商品页
      goToGoodsPage(customsId) {
        this.loading = true;
        this.openSp = false;
        this.aGoodsList = [];
        this.goodsQueryParams.customsId = customsId;
        listAGoodsNoPage(this.goodsQueryParams).then(response => {
          this.aGoodsList = response.rows;
          this.openSp = true;
          this.loading = false;
        });
      },
      // 打开库存页
      goToInventoryPage(customsId) {
        this.loading = true;
        this.openKc = false;
        this.aInventoryList = [];
        this.inventoryQueryParams.customsId = customsId;
        listAInventoryNoPage(this.inventoryQueryParams).then(response => {
          this.aInventoryList = response.rows;
          this.openKc = true;
          this.loading = false;
        });
      },
      /** 新增费用按钮操作 */
      handleAddFy() {
        this.resetFy();
        this.openFyXx = true;
        this.titleFyXx = "添加费用";
      },
      /** 修改费用按钮操作 */
      handleUpdateFy(row) {
        this.resetFy();
        const costId = row.costId || this.ids
        getACost(costId).then(response => {
          this.formCost = response.data;
          this.openFyXx = true;
          this.titleFyXx = "修改费用";
        });
      },
      /** 提交费用按钮 */
      submitFormFy() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.formCost.costId != null) {
              updateACost(this.formCost).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.openFyXx = false;
                this.goToCostPage(this.formCost.customsId);
              });
            } else {
              const customsId = this.custQueryParams.customsId;
              this.formCost.customsId = customsId;
              addACost(this.formCost).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.openFyXx = false;
                this.goToCostPage(customsId);
              });
            }
          }
        });
      },
      // 新建商品按钮
      handleAddSp() {
        this.resetFy();
        this.openSpXx = true;
        this.titleSpXx = "添加商品";
      },
      /** 修改商品按钮操作 */
      handleUpdateSp(row) {
        this.resetFy();
        const goodsId = row.goodsId || this.ids
        getAGoods(goodsId).then(response => {
          this.formSp = response.data;
          this.openSpXx = true;
          this.titleSpXx = "修改商品";
        });
      },
      /** 提交商品按钮 */
      submitFormSp() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.formSp.goodsId != null) {
              updateAGoods(this.formSp).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.openSpXx = false;
                this.goToGoodsPage(this.formSp.customsId);
              });
            } else {
              const customsId = this.goodsQueryParams.customsId;
              this.formSp.customsId = customsId;
              addAGoods(this.formSp).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.openSpXx = false;
                this.goToGoodsPage(customsId);
              });
            }
          }
        });
      },
      // 跳转附件页面
      openFjInNewTab(path) {
        const url = path; // 要打开的链接地址
        const newTab = window.open(url, '_blank');
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.formBgd = {};
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.customsId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加报关单信息";
      },
      AutoCustomsMsg() {
        this.openSCBGD = true;
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.loading = true;
        listAGuest(this.queryGuest).then(response => {
          this.aGuestList = response.rows;
          this.loading = false;
        });
        this.reset();
        const customsId = row.customsId || this.ids
        getACustomsMsg(customsId).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改报关单信息";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.customsId != null) {
              updateACustomsMsg(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addACustomsMsg(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 库存重置按钮操作 */
      resetQueryKc() {
        this.resetForm("inventoryQueryParams");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChangeKC(selection) {
        this.ids = selection.map(item => item.inventoryId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAddKc() {
        this.reset();
        this.openKcXx = true;
        this.title = "添加出库信息";
      },
      /** 修改按钮操作 */
      handleUpdateKc(row) {
        this.reset();
        const inventoryId = row.inventoryId || this.ids
        getAInventory(inventoryId).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改库存管理";
        });
      },
      /** 提交按钮 */
      submitFormKc() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.formKc.inventoryId != null) {
              updateAInventory(this.formKc).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.openKcXx = false;
                this.goToInventoryPage(this.formKc.customsId);
              });
            } else {
              const customsId = this.inventoryQueryParams.customsId;
              this.formKc.customsId = customsId;
              addAInventory(this.formKc).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.openKcXx = false;
                this.goToInventoryPage(customsId);
              });
            }
          }
        });
      },
      /** 提交自动识别按钮 */
      submitFormAuto() {
        // this.$refs["form"].validate(valid => {
        // if (valid) {
        this.openSCBGD = false;
        this.loading = true;
        listAGuest(this.queryGuest).then(response => {
          this.aGuestList = response.rows;
        });
        // this.reset();
        const cid = this.formBgd.url;
        autoAddCustomsMsg(this.formBgd).then(res => {
          this.form = res.data;
          this.open = true;
          this.title = "新增报关单信息";
          this.loading = false;
        });
        this.formBgd = {};
        // getACustomsMsg(cid).then(response => {
        //   this.form = response.data;
        //   this.open = true;
        //   this.title = "修改报关单信息";
        // });
        // }
        // }
        // );
      },
      /** 删除库存按钮操作 */
      handleDeleteKc(row) {
        const inventoryIds = row.inventoryId || this.ids;
        this.$modal.confirm('是否确认删除库存管理编号为"' + inventoryIds + '"的数据项？').then(function() {
          return delAInventory(inventoryIds);
        }).then(() => {
          this.goToInventoryPage(row.customsId);
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const customsIds = row.customsId || this.ids;
        this.$modal.confirm('是否确认删除报关单信息编号为"' + customsIds + '"的数据项？').then(function() {
          return delACustomsMsg(customsIds);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 删除按钮操作 */
      handleDeleteFy(row) {
        const costIds = row.costId || this.ids;
        this.$modal.confirm('是否确认删除费用编号为"' + costIds + '"的数据项？').then(function() {
          return delACost(costIds);
        }).then(() => {
          this.goToCostPage(row.customsId);
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      handleDeleteSp(row) {
        const goodsIds = row.goodsId || this.ids;
        this.$modal.confirm('是否确认删除商品编号为"' + goodsIds + '"的数据项？').then(function() {
          return delAGoods(goodsIds);
        }).then(() => {
          this.goToGoodsPage(row.customsId);
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('aCustomsMsg/aCustomsMsg/export', {
          ...this.queryParams
        }, `aCustomsMsg_${new Date().getTime()}.xlsx`)
      },
      /** 导出按钮操作 */
      handleExportFy() {
        this.download('aCost/aCost/export',
          this.custQueryParams, `费用详情_${new Date().getTime()}.xlsx`)
      },
      /** 导出按钮操作 */
      handleExportSp() {
        this.download('aGoods/aGoods/export', {
          ...this.goodsQueryParams
        }, `商品详情_${new Date().getTime()}.xlsx`)
      },
      handleExportCk(row) {
        let dateNow = new Date();
        let day = dateNow.getDay();
        let month = dateNow.getMonth();
        let year = dateNow.getFullYear();
        exportDocx('/templete.docx', {
          gsmc: '姜珊珊报关行',
          shipName: row.shipName,
          flight: row.flight,
          pieces: row.pieces,
          grossWeight: row.grossWeight,
          lowGrossWeight: row.lowGrossWeight,
          netWeight: row.netWeight,
          lowNetWeight: row.lowNetWeight,
          billLadingNum: row.billLadingNum,
          surplus: row.surplus,
          date: year+'-'+month+'-'+day
        }, `${row.billLadingNum}出库单_${new Date().getTime()}.docx`)
        // {userName: '鸡汤'} 需要在word中展示的数据
      }
    }
  };
</script>
